<template>
  <div>
    <!--搜索栏-->
    <el-card id="search">
      <el-row>
        <el-col :span="20">
          <!--左对齐-->
          <!-- <el-input v-model="searchModel.role" placeholder="Role" clearable /> -->
          <el-select v-model="searchModel.role" placeholder="Role">
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <el-input v-model="searchModel.partyId" placeholder="Party ID" clearable />
          <el-input v-model="searchModel.partner" placeholder="Partner" clearable />
          <!-- <el-input v-model="searchModel.status" placeholder="Status" clearable /> -->
          <el-select v-model="searchModel.status" placeholder="Status">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <el-input v-model="searchModel.notes" placeholder="Note" clearable />
          <el-button @click="getJobList" type="primary" round icon="el-icon-search">查询</el-button>
        </el-col>
        <el-col :span="4" align="right">
          <!--右对齐-->
          <el-button @click="openEditUI()" type="primary" icon="el-icon-plus" circle />
        </el-col>
      </el-row>
    </el-card>

    <!--查询结果-->
    <el-card id="result">
      <el-table :data="jobList" stripe style="width: 100%">
        <el-table-column label="#" width="60">
          <template slot-scope="scope">
            {{(searchModel.pageNo-1) * searchModel.pageSize + scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="任务ID" width="200">
        </el-table-column>
        <el-table-column prop="role" label="角色" width="100">
        </el-table-column>
        <el-table-column prop="partyId" label="参与方ID" width="100">
        </el-table-column>
        <el-table-column prop="partner" label="参与者" width="100">
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="200">
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="200">
        </el-table-column>
        <el-table-column prop="duration" label="运行时间" width="100">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
        </el-table-column>
      </el-table>
    </el-card>
    <!--分页组件-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!--提交conf，编辑对话框-->
    <el-dialog @close="clearFiles" title="title" :visible.sync="dialogVisible">
      <el-upload
      class="upload-demo"
      ref="upload"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :file-list="fileList"
      :multiple="true"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传json文件</div>
    </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="success" @click="upload">提交任务</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import JobManageApi from '@/api/jobManage'
export default {
  data() {
    return {
      title: {},
      jobForm: {},
      dialogVisible: false,
      total: 0,
      jobList: [],
      cnfFile: {},
      dslFile: {},
      fileList: [],
      searchModel: {
        pageNo: 1,
        pageSize: 10
      },
      roleOptions: [{
        value: 'guest',
        label: 'guest'
      }, {
        value: 'host',
        label: 'host'
      }, {
        value: 'arbiter',
        label: 'arbiter'
      }, {
        value: 'local',
        label: 'local'
      }],
      statusOptions: [{
        value: 'success',
        label: 'success'
      }, {
        value: 'running',
        label: 'running'
      }, {
        value: 'waiting',
        label: 'waiting'
      }, {
        value: 'failed',
        label: 'failed'
      }, {
        value: 'canceled',
        label: 'canceled'
      }],
      value: ''
    }
  },

  created() {
    this.getJobList()
  },

  methods: {
    submitUpload() {
      this.$refs.upload.submit()
    },
    // handleRemove(file, fileList) {
    //   console.log(file, fileList)
    // },
    // handlePreview(file) {
    //   console.log(file)
    // },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。function(file, fileList)
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize
      this.getJobList()
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo
      this.getJobList()
    },
    getJobList() {
      JobManageApi.getJobList(this.searchModel).then(response => {
        this.jobList = response.data.rows
        this.total = response.data.total
      })
    },
    openEditUI() {
      this.title = '提交任务'
      this.dialogVisible = true
    },
    clearFiles() {
      this.dialogVisible = false
      this.fileList = []
    },
    // clearCnfFile() {
    //   this.dialogCnfVisible = false
    //   this.cnfFile = {}
    // },
    // clearDslFile() {
    //   this.dialogDslVisible = false
    //   this.dslFile = {}
    // },
    // getCnfFile(item) {
    //   console.log(item.file)
    //   this.cnfFile = item.file
    // },
    // getDslFile(item) {
    //   console.log(item.file)
    //   this.dslFile = item.file
    // },
    upload() {
      console.log('fileList: ', this.fileList)
      JobManageApi.sumbmitJob(this.fileList).then(response => {
        // 成功提示
        this.$message({
          message: response.message,
          type: 'success'
        })
        // 关闭对话框
        this.dialogVisible = false
        // 刷新表格
        this.getJobList()
        // 清空数据
        this.fileList = []
      })
    }
  }
}
</script>

<style>
#search .el-input {
  width: 120px;
  margin-right: 30px;
}
.el-dialog .el-input {
  width: 85%;
}
</style>
